<template>
  <div class="caseInfo">
    <mu-appbar :z-depth="0" style="width: 100%;top: 0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <div class="headerBack">
          <mu-button flat class="backBarClass mu-ripple-wrapper" to="caseList">
            <mu-icon size="36" value="chevron_left" left></mu-icon>
          </mu-button>
        </div>
      </mu-button>
      {{fhCase.title}}
      <mu-button icon slot="right" @click="openFullScreenDialog">
        <mu-icon value="share"></mu-icon>
      </mu-button>
    </mu-appbar>
    <div style="overflow: scroll;height: 90%;width: 100%;padding: 0.3rem">
      <mu-grid-list style="width: 100%" :cols="1">
        <mu-grid-tile style="margin-left: 0.3rem">
          <img class="img" :src="fhCase.img? fhCase.img:caseImg">
          <!--<span slot="title">{{fhCase.title}}</span>-->
          <!--<mu-button v-if="token && hasCollect" slot="action" @click="cancel" icon>-->
            <!--<mu-icon color="deepOrange500" value="star"></mu-icon>-->
          <!--</mu-button>-->
          <!--<mu-button v-else slot="action" @click="collect()" icon>-->
            <!--<mu-icon value="star_border"></mu-icon>-->
          <!--</mu-button>-->
        </mu-grid-tile>
      </mu-grid-list>
      <div style="padding-bottom: 3rem">
        <mu-tabs :value.sync="active1" inverse color="primary" full-width indicator-color="primary" center>
          <mu-tab>案件信息</mu-tab>
          <mu-tab>文件信息</mu-tab>
          <mu-tab>公司信息</mu-tab>
        </mu-tabs>
        <div class="demo-text" v-if="active1 === 0">
          <mu-list>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">案件标题:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{fhCase.title}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">案件类型:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{type}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">案件进度:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                <span v-if="fhCase.status ===1">申报中</span>
                <span v-else-if="fhCase.status===2">受理中</span>
                <span v-else-if="fhCase.status===3">调解中</span>
                <span v-else-if="fhCase.status===4">诉讼中</span>
                <span v-else-if="fhCase.status===5">执行中</span>
                <span v-else-if="fhCase.status===6">已结束</span>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <div style="padding: 1rem 1.5rem 0 1.5rem" v-html="fhCase.remark"></div>
          </mu-list>
        </div>
        <div v-if="active1 === 1">
          <mu-container v-if="fhFiles && fhFiles.length >0" style="width: 100%">
            <mu-expansion-panel :zDepth=depth class="grid-cell"
                                v-for="(item,index) in fhFiles" v-bind:key="item.id"
                                :expand="panel === index" @change="toggle(index)">
              <div slot="header">{{item.name}}</div>
              <div style="width: 120%" v-if="item.type === 'pdf'">
                <pdf :url="item.url"></pdf>
              </div>
              <div v-else class="pic">
                <img :src="item.url" style="width: 100%;">
              </div>
            </mu-expansion-panel>
          </mu-container>
          <div style="text-align: center;margin-top: 2rem" v-else>暂无文件</div>
        </div>
        <div class="demo-text" v-if="active1 === 2">
          <mu-list>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">公司名称:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.name}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">股票代码:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.symbol}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">统一代码:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.creditCode}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">法人代表:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.corporation}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">联系电话:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.phone}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">邮箱:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.email}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
            <mu-list-item button :ripple="false">
              <mu-list-item-sub-title class="item-title">办公地址:</mu-list-item-sub-title>
              <mu-list-item-content class="item-content">
                {{company.officeAddress}}
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider></mu-divider>
          </mu-list>
        </div>
      </div>
    </div>
    <mu-container class="button-wrapper">
      <mu-flex justify-content="center" align-items="center">
        <mu-button round full-width color="primary" @click="join">加入申报</mu-button>
      </mu-flex>
      <mu-bottom-sheet :open.sync="open">
        <mu-list @item-click="closeBottomSheet">
          <mu-sub-header>系统检测到您未登录，请选择</mu-sub-header>
          <mu-list-item button to="login">
            <mu-list-item-action>
              <mu-icon value="account_circle" color="orange"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>手机号登陆</mu-list-item-title>
          </mu-list-item>
          <mu-list-item button to="register">
            <mu-list-item-action>
              <mu-icon value="inbox" color="blue"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>手机号注册</mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-bottom-sheet>
      <mu-dialog :title="protocol.title" width="600" max-width="90%" :esc-press-close="false" :overlay-close="false"
                 :open.sync="openAlert">
        <span v-html="protocol.content"></span>
        <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">关闭</mu-button>
        <mu-button slot="actions" flat color="primary" @click="goDeclare">同意</mu-button>
      </mu-dialog>
    </mu-container>
    <mu-dialog width="150%" overlay-color="black" :overlay-opacity="0.9" scrollable11
               :open.sync="openFullScreen">
      <mu-container id="screen_subject" ref="container">
        <mu-paper :z-depth="2">
          <mu-list textline="three-line">
            <mu-list-item avatar button :ripple="false">
              <mu-list-item-action>
                <mu-avatar>
                  <img v-if="company.iconUrl" :src="company.iconUrl">
                  <mu-icon color="primary" size="36" v-else value="chrome_reader_mode"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                {{fhCase.title}}
              </mu-list-item-content>
            </mu-list-item>
          </mu-list>
          <mu-card style="width: 100%; margin: 0 auto;">
            <mu-card-media>
              <img :src="shareQrCode">
            </mu-card-media>
            <mu-card-title style="text-align: center;margin-top:-2rem" sub-title="长按识别或保存二维码"></mu-card-title>
          </mu-card>
        </mu-paper>
      </mu-container>
    </mu-dialog>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';
  import pdf from '@/components/pdf.vue';
  import util from '@/common/util.js';
  import caseImg from '../../assets/images/case.jpg';

  export default {
    name: 'caseInfo',
    data() {
      return {
        caseImg,
        token: '',
        screenUrl: "",
        openFullScreen: false,
        protocol: {
          id: '',
          title: '申报说明',
          content: this.PROTOCOL_CONTENT
        },
        openAlert: false,
        open: false,
        depth: 0,
        panel: '',
        active1: 0,
        type: '',
        declareFlag: true,
        fhCase: {},
        company: {},
        organization: {},
        bank: {},
        fhFiles: [],
        openLink: false,
        openFile: false,
        shareQrCode: '',
        hasCollect: false
      }
    },
    methods: {
      getProtocol() {
        const _self = this;
        let params = {
          id: this.$route.query.id
        };
        this.postRequest("/protocol/getProtocol", params).then(res => {
          if (res.code === 200 && res.data) {
            _self.protocol = res.data;
          }
        });
      },
      goDeclare() {
        this.$router.push({name: 'declare', query: {caseId: this.fhCase.id}});
      },
      closeAlertDialog() {
        this.openAlert = false;
      },
      closeBottomSheet() {
        this.open = false;
      },
      getData() {
        const _self = this;
        let params = {
          id: this.$route.query.id
        };
        this.postRequest("/case/info", params).then(res => {
          if (res.code === 200) {
            _self.fhCase = res.data.fhCase;
            _self.company = res.data.company;
            _self.organization = res.data.organization;
            _self.bank = res.data.bank;
            _self.fhFiles = res.data.fhFiles;
            _self.type = res.data.type
          }
        });
      },
      toggle(panel) {
        this.panel = panel === this.panel ? '' : panel;
      },
      join() {
        this.$router.push({name: 'declare', query: {caseId: this.fhCase.id}});
      },
      openLinkDialog() {
        if (this.info.linkInfo !== null && this.info.linkInfo !== '') {
          window.open(this.info.linkInfo);
        } else {
          this.$toast.error('无相关链接');
        }
      },
      openFileDialog() {
        this.openFile = true;
      },
      copyLink() {
        util.copyText(this, '.linkData');
        this.openLink = false;
      },
      copyFile() {
        util.copyText(this, '.fileData');
        this.openFile = false;
      },
      openUrl(url) {
        window.open(url);
      },
      openFullScreenDialog() {
        this.openFullScreen = true;
        if (this.token) {
          this.shareQrCode = this.baseUrl + "/qr/referralDeclare/" + this.fhCase.id + "?token=" + this.token;
        } else {
          this.shareQrCode = this.baseUrl + "/qr/referralCase/" + this.fhCase.id;
        }
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      getCollectStatus() {
        if (this.token) {
          let param = {
            id: this.$route.query.id
          };
          let _this = this;
          this.postRequest("/user/isCollect", param).then(res => {
            if (res.code === 200) {
              _this.hasCollect = res.data;
            }
          })
        }
      },
      collect() {
        if (this.token) {
          let params = {
            ids: [this.$route.query.id]
          };
          let _this = this;
          this.postRequest("/user/collect", params).then(res => {
            if (res.code === 200) {
              _this.hasCollect = true;
            }
          });
        } else {
          this.open = true;
        }
      },
      cancel() {
        let params = {
          ids: [this.$route.query.id]
        };
        let _this = this;
        this.postRequest("/user/cancelCollect", params).then(res => {
          if (res.code === 200) {
            _this.hasCollect = false;
          }
        });
      },
      visit() {
        this.postRequest("/referral/visit").then(res => {
        });
      }
    },
    mounted() {
      this.getData();
      this.getProtocol();
      this.getCollectStatus();
      if (this.getStore("declareToken")) {
        this.visit();
      }
    },
    created() {
      this.token = this.getStore("accessToken");
      let declareToken = this.$route.query.declare;
      if (declareToken) {
        this.setStore("declareToken", declareToken);
      }
    },
    components: {
      pdf,
      headerBack
    }
  }
</script>

<style scoped lang="scss">
  .caseInfo {
    position: fixed;
    top: 0;
    width: 100%;
    /*margin-bottom: 3rem;*/
    /*overflow: auto;*/
    height: 100%;
    background-color: #f9f9f9;
    z-index: 9999;
  }

  .title {
    width: 100%;
    color: #ffffff;
    font-size: 15px;
  }

  .appbar {
    padding: 0;
    width: 100%;
    text-align: center;
    position: fixed;
  }

  .flex-title {
    width: 100%;
    height: 100%;
  }

  .flex-content {
    width: 100%;
    height: 300px;
    line-height: 100%;
    overflow: scroll;
  }

  .flex-bottom {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .portrait {
    position: absolute;
    top: 100px;
    left: 12%;
    background-color: #c62828;
    height: 100px;
    width: 100px;
    /*border-radius: 100%;*/
  }

  .name {
    color: white;
    font-size: 13px;
    top: 90px;
    left: 36%;
    position: absolute;
    line-height: 30px;
    padding: 5px;
  }

  .icon {
    top: 85%;
    left: 35%;
  }

  .span-identity-0 {
    background-color: #c62828;
    border-width: 3px;
    font-size: 10px;
    border-radius: 4px;
    color: #ffffff;
  }

  .articleFooterBtn {
    margin: 0 10%;
    span {
      height: 3.6rem;
      line-height: 3.6rem;
      text-align: center;
      font-size: 1.6rem;
    }
  }

  .backBarClass {
    width: 5rem;
  }

  .demo-text {
    padding: 16px;
    background: #fff;
    p {
      margin: 8px 0;
    }
  }

  .item-title {
    width: 35%;
  }

  .item-content {
    width: 100%;
  }

  .grid-cell {
    margin-top: 5px;
    border-radius: 6px;
    background: #f2f2f2;
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .button-wrapper {
    position: fixed;
    text-align: center;
    bottom: 0;
    .mu-button {
      margin: 4px;
      vertical-align: middle;
    }
    a.mu-button {
      text-decoration: none;
    }
  }

  .img {
    max-height: 200px;
    width: 100%;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
  }
</style>
